<template>
  <table>
    <thead v-if="titleShow">
      <tr>
        <th class="u-table rank-hd" v-if="defaultColumn.title"></th>
        <th class="u-table title-hd" v-if="defaultColumn.title">
          <div class="u-table wp">标题</div>
        </th>
        <th class="u-table duration-hd" v-if="defaultColumn.duration">
          <div class="u-table wp wp-dura">时长</div>
        </th>
        <th class="u-table artist-hd" v-if="defaultColumn.artist">
          <div class="u-table wp">歌手</div>
        </th>
        <template v-if="TheadData">
          <th class="u-table" v-for="item in TheadData" :key="item.name" :class="item.key + '-hd'">
            <div class="u-table wp">{{ item.name }}</div>
          </th>
        </template>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="item.id" :class="index % 2 === 0 ? 'even' : ''">
        <td class="rank-td" v-if="defaultColumn.rank">
          <!-- 排名 -->
          <div class="hd">
            <span class="num">{{ index + 1 }}</span>
            <slot name="rankIcon" :row="item"></slot>
          </div>
        </td>
        <td class="title-td" v-if="defaultColumn.title">
          <a
            :href="'/song?id=' + item.id"
            class="img-wrap"
            v-if="isImage && index < 3"
            @click.prevent="$router.push('/song?id=' + item.id)"
          >
            <img :src="item.al.picUrl + '?param=50y50&quality=100'" alt=""
          /></a>
          <div :class="isImage && index < 3 ? 'temp-mt' : ''">
            <slot name="playIcon" :row="item"></slot>
            <div class="dec">
              <span
                ><a
                  :href="'/song?id=' + item.id"
                  @click.prevent="$router.push('/song?id=' + item.id)"
                  >{{ item.name }}</a
                ></span
              >
              <span v-if="item.alia[0]" class="alia"> - ({{ item.alia[0] }})</span>
            </div>
          </div>
        </td>
        <td class="duration-td" v-if="defaultColumn.duration">
          <div>
            <span class="dura">{{ item.dt | songDuration }}</span>
            <slot name="operation">
              <div class="u-opt">
                <a
                  href="javascript:;"
                  class="u-icn add"
                  title="添加到播放列表"
                  @click="addList(item)"
                ></a>
                <span class="u-table icn-fav" title="收藏" @click="operationClick"></span>
                <span class="u-table icn-share" title="分享" @click="operationClick"></span>
                <span class="u-table icn-dl" title="下载" @click="operationClick"></span>
              </div>
            </slot>
          </div>
        </td>
        <td class="artist-td f-thide" v-if="defaultColumn.artist">
          <div class="artist" :title="item.arname">
            <a
              :href="'artist?id=' + art.id"
              v-for="(art, index2) in item.ar"
              :key="index2"
              @click.prevent="$router.push('artist?id=' + art.id)"
              >{{ index2 == item.ar.length - 1 ? art.name : art.name + '/' }}</a
            >
          </div>
        </td>
        <template v-if="TheadData">
          <td v-for="col in TheadData" :key="col.key" :class="col.key + '-td'">
            <div><slot :name="col.key" :row="item"></slot></div>
          </td>
        </template>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { songDuration } from '@/utils/filters.js'
import { operationClick } from '@/utils/methods.js'
export default {
  props: {
    // 是否显示标题
    titleShow: {
      type: Boolean,
      default: true
    },
    // 展示默认列
    defaultColumn: {
      type: Object,
      default: () => {
        return {
          rank: true,
          title: true,
          duration: true,
          artist: true
        }
      }
    },
    // 渲染的数据
    list: {
      type: Array,
      required: true
    },
    // 额外的列 [{key, name}]
    TheadData: {
      type: Array,
      default: null
    },
    // 前三行是否展示图片
    isImage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    // 追加音乐到播放列表不播放
    addList(list) {
      this.$store.commit('Music/pushSongList', list)
    },
    // 收藏、分享
    operationClick
  },
  filters: {
    songDuration
  }
}
</script>

<style lang="less" scoped>
@import './Table.less';
</style>
